import * as BABYLON from "babylonjs"; //全部引入

function dyTex(scene) {
  let dynamicTex = new BABYLON.DynamicTexture(
    "dynamicTex",
    { height: 100, width: 100 },
    scene,
    true
  );

  let planeOpts = {
    height: 0.5,
    width: 0.5,
    sideOrientation: 0
  };
  let textBoard = BABYLON.MeshBuilder.CreatePlane(
    "textBoard",
    planeOpts,
    scene
  );
  textBoard.position = new BABYLON.Vector3(4, 0, -3);
  textBoard.rotation.x = Math.PI / 2;
  textBoard.material = new BABYLON.StandardMaterial("M", scene);
  // textBoard.material.alpha = 0.3;
  textBoard.material.diffuseTexture = dynamicTex;
  // 这样设置透明没效果，有点意思, 字写错了 nb
  textBoard.material.diffuseTexture.hasAlpha = true;
  // 动态纹理这样可以设置成透明
  // dynamicTex.hasAlpha = true;
  // textBoard.material.backFaceCulling = false;
  textBoard.material.emissiveColor = new BABYLON.Color3(1, 0.6, 0);
  let radiu = 25;
  let alpha = 1;
  scene.registerBeforeRender(() => {
    let ctx = dynamicTex.getContext();
    ctx.clearRect(0, 0, 100, 100);
    // ctx.fillStyle = "rgba(51, 51, 76, 1)";
    // ctx.fillRect(0, 0, 100, 100);
    ctx.beginPath();
    ctx.fillStyle = "rgba(255, 150, 0, 1)";
    ctx.arc(50, 50, 20, 0, Math.PI * 2, false);
    ctx.fill();
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.strokeStyle = `rgba(255, 150, 0, ${alpha})`;
    // console.log(ctx.strokeStyle, "stroke");
    // 绘制圆的路径**
    ctx.arc(50, 50, radiu, 0, Math.PI * 2, false);

    // 0°是从三点钟方向开始的

    // 描边路径
    ctx.stroke();
    dynamicTex.update();
    alpha < 0 ? (radiu = 25) : (radiu += 1);
    alpha < 0 ? (alpha = 1) : (alpha -= 0.04);
    // ctx.fillStyle = #713030;
  });
}
export default dyTex;
